<template>
  <div class="stat-card" :style="{ width: width + 'px', height: height + 'px' }">
    <div class="card-header">
      <h3 class="card-title">{{ title }}</h3>
    </div>
    <div class="card-content">
      <div class="value-section">
        <div class="value-display">
          <span class="prefix" v-if="prefix">{{ prefix }}</span>
          <span class="main-value">{{ formattedValue }}</span>
          <span class="suffix" v-if="suffix">{{ suffix }}</span>
        </div>
        
        <div class="trend-section" v-if="trend">
          <span class="trend-text" :style="{ color: trendColor }">
            {{ trend }}
          </span>
        </div>
      </div>
      
      <div class="icon-section">
        <i class="el-icon-s-data stat-icon"></i>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  width?: number
  height?: number
  title?: string
  value?: number
  prefix?: string
  suffix?: string
  precision?: number
  trend?: string
  trendColor?: string
}

const props = withDefaults(defineProps<Props>(), {
  width: 200,
  height: 120,
  title: '统计卡片',
  value: 1234,
  prefix: '',
  suffix: '',
  precision: 2,
  trend: '↑ 12.5%',
  trendColor: '#67C23A'
})

// 计算属性
const formattedValue = computed(() => {
  if (props.precision === 0) {
    return Math.round(props.value).toLocaleString()
  }
  return props.value.toLocaleString(undefined, {
    minimumFractionDigits: props.precision,
    maximumFractionDigits: props.precision
  })
})
</script>

<style lang="scss" scoped>
.stat-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }
  
  .card-header {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    .card-title {
      margin: 0;
      font-size: 14px;
      font-weight: 500;
      color: white;
    }
  }
  
  .card-content {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: calc(100% - 60px);
    
    .value-section {
      flex: 1;
      
      .value-display {
        margin-bottom: 8px;
        
        .prefix {
          font-size: 14px;
          color: #909399;
          margin-right: 4px;
        }
        
        .main-value {
          font-size: 28px;
          font-weight: bold;
          color: #303133;
        }
        
        .suffix {
          font-size: 14px;
          color: #909399;
          margin-left: 4px;
        }
      }
      
      .trend-section {
        .trend-text {
          font-size: 12px;
          font-weight: 500;
        }
      }
    }
    
    .icon-section {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      border-radius: 50%;
      margin-left: 16px;
      
      .stat-icon {
        font-size: 24px;
        color: white;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .stat-card {
    .card-content {
      flex-direction: column;
      text-align: center;
      
      .icon-section {
        margin-left: 0;
        margin-top: 12px;
        width: 50px;
        height: 50px;
        
        .stat-icon {
          font-size: 20px;
        }
      }
    }
  }
}
</style> 